<template>
  <div class="line-chart-container">
    <h3 class="chart-title">{{ title }}</h3>
    <div ref="chartRef" class="echarts-chart"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
import * as echarts from 'echarts'

interface Props {
  title: string
  androidData: number[]
  iosData: number[]
  xLabels: string[]
}

const props = defineProps<Props>()
const chartRef = ref<HTMLElement>()
let chartInstance: echarts.ECharts | null = null

const initChart = async () => {
  await nextTick()
  if (!chartRef.value) return

  chartInstance = echarts.init(chartRef.value)
  
  const option = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: 'rgba(0, 0, 0, 0.8)'
        }
      },
      backgroundColor: 'rgba(0, 0, 0, 0.9)',
      borderColor: '#00d4ff',
      borderWidth: 1,
      textStyle: {
        color: '#fff',
        fontSize: 12
      }
    },
    legend: {
      show: false
    },
    grid: {
      left: '3%',
      right: '3%',
      bottom: '8%',
      top: '5%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: props.xLabels,
      axisLine: {
        lineStyle: {
          color: 'rgba(0, 212, 255, 0.3)',
          width: 1
        }
      },
      axisLabel: {
        color: '#ccc',
        fontSize: 10
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)',
          type: 'dashed'
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: 'rgba(0, 212, 255, 0.3)',
          width: 1
        }
      },
      axisLabel: {
        color: '#888',
        fontSize: 10
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)',
          type: 'dashed'
        }
      }
    },
    series: [
      {
        name: '上上周',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 6,
        lineStyle: {
          width: 2,
          color: '#00d4ff'
        },
        itemStyle: {
          color: '#00d4ff',
          borderColor: '#00d4ff',
          borderWidth: 2
        },
        areaStyle: {
          opacity: 0.2,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(0, 212, 255, 0.3)'
            },
            {
              offset: 1,
              color: 'rgba(0, 212, 255, 0.05)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: props.androidData
      },
      {
        name: '上周',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 6,
        lineStyle: {
          width: 2,
          color: '#00ff88'
        },
        itemStyle: {
          color: '#00ff88',
          borderColor: '#00ff88',
          borderWidth: 2
        },
        areaStyle: {
          opacity: 0.2,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(0, 255, 136, 0.3)'
            },
            {
              offset: 1,
              color: 'rgba(0, 255, 136, 0.05)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: props.iosData
      }
    ]
  }

  chartInstance.setOption(option)
}

const resizeChart = () => {
  if (chartInstance) {
    chartInstance.resize()
  }
}

// 监听数据变化
watch(() => [props.androidData, props.iosData, props.xLabels], () => {
  if (chartInstance) {
    initChart()
  }
}, { deep: true })

onMounted(() => {
  initChart()
  window.addEventListener('resize', resizeChart)
})

onUnmounted(() => {
  if (chartInstance) {
    chartInstance.dispose()
  }
  window.removeEventListener('resize', resizeChart)
})
</script>

<style scoped>
.line-chart-container {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 12px;
  padding: 5px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.chart-title {
  font-size: 18px;
  font-weight: 600;
  color: #00d4ff;
  margin: 0 0 15px 0;
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 212, 255, 0.3);
}

.echarts-chart {
  width: 100%;
  height: 240px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .echarts-chart {
    height: 160px;
  }
}
</style>
